<template>
    <div>
        <!-- <h2>普通表格</h2>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" label="日期" width="180" />
            <el-table-column prop="name" label="名字" width="180" />
            <el-table-column prop="address" label="地址" />
        </el-table> -->

        <h2>成绩表</h2>
        <el-table :data="list" border style="width: 100%">
            <el-table-column prop="id" label="编号" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="class" label="班级" width="180" />
            <el-table-column prop="chinese" label="语文" width="180" />
            <el-table-column prop="math" label="数学" width="180" />
            <el-table-column prop="english" label="英语" width="180" />
            <el-table-column label="总分" width="180">
                <template #header>
                    我的总分
                </template>
                <!-- slotScope ={row 当前行数据,column 列信息,$index 数据索引} -->
                <!-- <template #default="slotScope">
                    {{ slotScope.row.chinese + slotScope.row.math + slotScope.row.english }}
                </template> -->
                <template #default="{ row }">
                    {{ row.chinese + row.math + row.english }}
                </template>
            </el-table-column>

            <el-table-column label="操作" width="180">

                <template #default="{ row }">
                    <el-button @click="editHandler(row)">编辑</el-button>
                    <el-button @click="delhandler(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- <el-dialog v-model="isShow" title="成绩编辑" top="200px" show-close draggable>
            <template #title>
            </template>
            <template #default>
                hello world
            </template>
            <template #footer>
                <el-button>确认</el-button>
                <el-button @click="isShow=false">取消</el-button>
            </template>
        </el-dialog> -->

        <el-dialog v-model="isShow" title="成绩编辑" top="200px" show-close center>
            <template #default>
                <el-form ref="myForm" :model="info" label-width="80px">
                    <el-form-item label="姓名" prop="name">
                        <el-input v-model="info.name" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="班级" prop="class">
                        <el-input v-model="info.class" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="语文" prop="chinese">
                        <el-input v-model="info.chinese"></el-input>
                    </el-form-item>
                    <el-form-item label="数学" prop="math">
                        <el-input v-model="info.math"></el-input>
                    </el-form-item>
                    <el-form-item label="英语" prop="english">
                        <el-input v-model="info.english"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button>提交</el-button>
                        <el-button>重置</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>

       
    </div>
</template>

<script>
import axios from "axios";

// 函数式组件  => 不是当做组件直接在template中使用,而是作为函数调用 

// 按需引入 (函数式组件)
// import { ElMessage } from 'element-plus'
// import { ElNotification } from 'element-plus'
import { ElMessageBox  } from 'element-plus'

// 官方默认注册全局属性 /方法   => 每个组件可通过 this.$message({}); 
// app.config.globalProperties.$message = ElMessage
// app.config.globalProperties.$notify = ElNotification
// app.config.globalProperties.$msgbox = ElMessageBox
// app.config.globalProperties.$alert = ElMessageBox.alert
// app.config.globalProperties.$confirm = ElMessageBox.confirm
// app.config.globalProperties.$prompt = ElMessageBox.prompt

const tableData = [
    {
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        date: '2016-05-03',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
]


export default {
    data() {
        return {
            tableData: tableData,
            searchParams: {
                wd: "",
                col: "id",
                type: "asc",
                page: 1,
                size: 20,
            },
            info: {
                id: "",
                name: "",
                class: "",
                chinese: "",
                math: "",
                english: "",
            },
            list: [],
            isShow: false,
        }
    },
    methods: {
        editHandler(currentGrade) {
            this.isShow = true;
            this.info = { ...currentGrade };
            console.log(this.info);
        },
        delhandler(row) {
            let index = this.list.indexOf(row);
            this.list.splice(index, 1);


            // ElMessage("当前成绩被删除了!!");  
            // var ele = ElMessage({
            //     message:"<b>当前成绩被删除了</b>",
            //     type:"success",
            //     plain: true,
            //     icon:"SwitchButton",
            //     dangerouslyUseHTMLString:true,
            //     duration:0,
            //     onClose:function(){
            //         console.log("已经关闭");
            //     }
            // });  

            /* var ele = this.$message({
                message:"<b>当前成绩被删除了</b>",
                type:"success",
                plain: true,
                icon:"SwitchButton",
                dangerouslyUseHTMLString:true,
                duration:0,
                onClose:function(){
                    console.log("已经关闭");
                }
            });  

            setTimeout(()=>{
                ele.close();
            },1000) */

            
            // 默认 alert  
            // ElMessageBox({
            //     title:"提示",
            //     message:"删除成功",
            //     type:"success"
            // })

            // ElMessageBox.alert(message,title,option)
            // ElMessageBox.alert("删除成功","提示",{
            //     type:"success"
            // })

            // ElMessageBox.confirm("是否删除当前成绩","提示",{
            //     // type:"success",
            //     cancelButtonText:"取消",
            //     confirmButtonText:"确认",
            // }).then(()=>{
            //     this.$message("点击了确认");
            // }).catch(()=>{
            //     this.$message("点击了取消");
            // })


            ElMessageBox.prompt("是否删除当前成绩","提示",{
                // type:"success",
                cancelButtonText:"取消",
                confirmButtonText:"确认",
            }).then((arg)=>{
                console.log(1111,arg);
                this.$message("点击了确认:"+arg.value);
            }).catch((arg)=>{
                console.log(2222,arg);
                this.$message("点击了取消");
            })



            
        },
        getGradeData() {
            axios.get("http://121.43.116.41/demo/php/searchGradeOrderLimit.php", {
                params: {
                    ...this.searchParams,
                }
            })
                .then(responseOption => {

                    // 服务器返回的状态码(后端是否返回数据)  xhr.status => 100 200(成功) 300 400 500
                    if (responseOption.status == 200) {
                        return responseOption.data
                    }
                })
                .then(result => {
                    console.log("result", result);

                    // 后端返回数据的状态 (增删改查 操作 => 成功/失败)
                    // 举例:  登录 => 登录成功/登陆失败(用户名不存在,密码错误)
                    if (result.status) {  // 查询成功
                        this.list = result.list;
                    }
                })

        }
    },
    mounted() {
        this.getGradeData();
    }
}
</script>

<style lang="scss" scoped></style>